<template>
	<view class="_integral_item">
		<view class="u-p-32 _top">
			<view class="u-flex u-flex-items-center">
				<image src="@/static/logo.jpeg" mode="aspectFill"></image>
				<view class="u-m-l-28 u-flex-1">
					<view class="u-flex u-flex-between u-flex-items-center">
						<view class="f-s-16 f-w-b">{{ info.userName }}</view>
						<status text="成功" bgColor="rgba(8,169,68,0.1)" color="#08A944"></status>
					</view>
					<view class="f-s-14 u-info u-m-t-10">{{ info.companyName }}</view>
				</view>
			</view>
			<view class="_content u-m-t-24">
				<view class="f-s-14">
					<text>{{ info.content }}：</text><text class="main-color">{{ info.integral }}分</text>
				</view>
				<view class="f-s-12 u-info u-m-t-10">
					发放时间：{{ info.createAt }}
				</view>
			</view>
		</view>
		<view class="u-flex u-flex-end u-flex-items-center u-p-32">
			<view style="display: flex;width: 380rpx;justify-content: space-between;">
				<up-button text="查看" :customStyle="{
					width: '150rpx',
					height: '56rpx',
					background: '#fff',
					borderRadius: '8rpx',
					fontSize: '28rpx',
					color: '#000000'
				}" @click="toInfo"></up-button>
				<up-button text="复议" :customStyle="{
					width: '150rpx',
					height: '56rpx',
					background: '#1677FF',
					borderRadius: '8rpx',
					fontSize: '28rpx',
					color: '#FFFFFF'
				}" @click="toAfter"></up-button>
			</view>
		</view>

	</view>
</template>

<script setup>
	import {
		toast
	} from '@/utils/common';
	import Status from './common/Status.vue';

	const props = defineProps({
		info: Object,
	})

	const toInfo = () => {
		uni.navigateTo({
			url: `/subPackages/integral/info?id=${props.info.id}`
		})
	}

	const toAfter = () => {
		uni.navigateTo({
			url: `/subPackages/integral/after?id=${props.info.id}`
		})
	}
</script>

<style lang="scss" scoped>
	._integral_item {
		background: #FFFFFF;
		box-shadow: 0rpx 2rpx 20rpx 0rpx rgba(0, 0, 0, 0.05);
		border-radius: 16rpx;
		margin-bottom: 24rpx;

		._top {
			border-bottom: 1rpx solid rgba(0, 0, 0, 0.06);

			image {
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
			}

			._content {
				background: rgba(0, 0, 0, 0.04);
				border-radius: 8px;
				padding: 24rpx;
			}
		}
	}
</style>